<template>
	<view class="category-page">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="title">商品分类</text>
		</view>
		
		<!-- 主体内容 -->
		<view class="main-content">
			<!-- 左侧分类菜单 -->
			<scroll-view class="category-menu" scroll-y>
				<view 
					class="menu-item" 
					v-for="(item, index) in categoryList" 
					:key="index"
					:class="{ active: currentCategory === item.category }"
					@tap="selectCategory(item.category)"
				>
					<text>{{ item.name }}</text>
				</view>
			</scroll-view>
			
			<!-- 右侧商品列表 -->
			<scroll-view class="product-list" scroll-y>
				<view class="product-item" v-for="(item, index) in filteredProducts" :key="index" @tap="goToDetail(item.id)">
					<image :src="item.image" mode="aspectFill"></image>
					<view class="product-info">
						<text class="product-name">{{ item.name }}</text>
						<text class="product-price">¥{{ item.price }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { ref, computed, onMounted } from 'vue'

export default {
	setup() {
		const products = ref([])
		const currentCategory = ref('phone') // 默认显示手机分类
		
		// 分类数据
		const categoryList = ref([
			{ name: '手机', category: 'phone' },
			{ name: '牛奶', category: 'milk' },
			{ name: '服装', category: 'clothing' },
			{ name: '食品', category: 'food' }
		])

		// 加载商品数据
		const loadProducts = () => {
			const data = uni.getStorageSync('products') || []
			products.value = data
		}

		// 根据分类筛选商品
		const filteredProducts = computed(() => {
			return products.value.filter(item => item.category === currentCategory.value)
		})

		// 选择分类
		const selectCategory = (category) => {
			currentCategory.value = category
		}

		// 跳转到商品详情页
		const goToDetail = (id) => {
			uni.navigateTo({
				url: `/pages/shopDetail/shopDetail?id=${id}`
			})
		}

		onMounted(() => {
			loadProducts()
		})

		return {
			products,
			currentCategory,
			categoryList,
			filteredProducts,
			selectCategory,
			goToDetail
		}
	}
}
</script>

<style scoped>
.category-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f8f8f8;
}

.header {
	height: 88rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.main-content {
	flex: 1;
	display: flex;
	overflow: hidden;
}

.category-menu {
	width: 180rpx;
	height: 100%;
	background-color: #fff;
	box-shadow: 2rpx 0 10rpx rgba(0, 0, 0, 0.05);
}

.menu-item {
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	color: #666;
	position: relative;
	transition: all 0.3s;
}

.menu-item.active {
	background-color: #f8f8f8;
	color: #007AFF;
	font-weight: bold;
}

.menu-item.active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8rpx;
	height: 32rpx;
	background-color: #007AFF;
	border-radius: 0 4rpx 4rpx 0;
}

.product-list {
	flex: 1;
	height: 100%;
	padding: 20rpx;
	box-sizing: border-box;
}

.product-item {
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	transition: all 0.3s;
	position: relative;
}

.product-item:active {
	transform: scale(0.98);
}

.product-item image {
	width: 100%;
	height: 300rpx;
	transition: all 0.3s;
}

.product-item:active image {
	transform: scale(1.05);
}

.product-info {
	padding: 24rpx;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 16rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	line-height: 1.4;
}

.product-price {
	font-size: 36rpx;
	color: #ff0000;
	font-weight: bold;
	display: flex;
	align-items: baseline;
}

.product-price::before {
	content: '¥';
	font-size: 24rpx;
	margin-right: 4rpx;
}

/* 添加商品卡片悬停效果 */
.product-item::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4rpx;
	background: linear-gradient(to right, #007AFF, #00BFFF);
	opacity: 0;
	transition: opacity 0.3s;
}

.product-item:active::after {
	opacity: 1;
}

/* 优化滚动条 */
::-webkit-scrollbar {
	width: 0;
	background: transparent;
}

/* 添加分类菜单悬停效果 */
.menu-item:hover {
	background-color: #f8f8f8;
}

/* 添加商品图片加载动画 */
@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

.product-item image {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
}

.product-item image[src] {
	animation: none;
}
</style>